import type {IgroupBuy} from  '../../../../types/channel'
import { Card,Col, Row ,Input ,Button,DatePicker} from 'antd';

import {useState} from 'react';
import { useNavigate } from 'react-router-dom';
// 定义props的类型
interface Iprops{
 onChange:(arg:IgroupBuy)=>void
}
const { RangePicker } = DatePicker;
function SearchGroup( props:Iprops) {
  // 组件的默认搜索数据
  const baseSearch:IgroupBuy = {id:"",name:"",startTime:""}
  // 组件的搜索条件
  const [searchParams,setSearchParams] = useState(baseSearch);
  const navigate = useNavigate()
  return ( <Card type="inner" title="筛选查询" extra={<Button type='primary' 
  onClick={()=>navigate("/admin/channel/createGroupBuy")}>创建团购</Button>}>
   <Row>
      <Col span={7}>
        <label>活动编号:</label>
        <Input value={searchParams.id} onChange={(e)=>{
           setSearchParams({...searchParams,id:e.target.value})
        }}/>
      </Col>
      <Col span={7}>
      <label>活动名称:</label>
        <Input value={searchParams.name} onChange={(e)=>{
           setSearchParams({...searchParams,name:e.target.value})
        }}/>
      </Col>
      <Col span={10}>
      <label>活动开始时间:</label>
      <RangePicker format="YYYY-MM-DD HH:mm:ss" onChange={(dates,dateStrings)=>{
        console.log(dateStrings)
        setSearchParams({...searchParams,startTime:dateStrings.join(',')})
      }} />
        <Input value={searchParams.startTime} onChange={(e)=>{
           setSearchParams({...searchParams,startTime:e.target.value})
        }}/>
      </Col>
    </Row>
    <Row>
      <Col>1</Col>
      <Col>2</Col>
      <Col>
      <Button type="link" onClick={()=>{
        setSearchParams(baseSearch);
        props.onChange(baseSearch);
      }}>重置</Button>
      <Button type='primary'
       onClick={()=>{
        // 单击确定的时候,修改本组件的搜索
        // 调用父组件传入onChange事件,传入当前组件的搜索条件
        setSearchParams(searchParams);
        props.onChange(searchParams);
      }}
      >搜索</Button>
      </Col>
    </Row>
</Card> );
}

export default SearchGroup;